<template>
  <div class="estimate-form">
    <div class="step">
      <a-steps :current="stepActive" size="large" style="width: 50%;">
        <a-step title="主诉问题及评估服务" />
        <a-step title="平安关爱摸底" />
      </a-steps>
    </div>
    <form1 ref="form1" v-show="stepActive === 0"></form1>
    <form2 ref="form2" v-show="stepActive === 1"></form2>
    <div class="button-wrap">
      <a-button v-if="stepActive === 1" @click="onPref">上一步</a-button>
      <a-button type="primary" v-else @click="onNext">下一步</a-button>
      <a-button type="primary" style="margin-left: 15px;" v-if="stepActive === 1" @click="submit">提交</a-button>
      <a-button style="margin: 0 15px;" type="primary" ghost @click="submit">保存并退出</a-button>
      <a-button @click="onCancel">取消</a-button>
    </div>
  </div>
</template>

<script>
  import form1 from './components/ProblemAndService.vue'
  import form2 from './components/FeelTheBottom.vue'
  import {
    estimateInput
  } from '@/api/sjsk/estimate/list/index.js'
  export default {
    components: {
      form1,
      form2
    },
    data() {
      return {
        stepActive: 0
      }
    },
    created() {

    },
    methods: {
      onPref() {
        if (this.stepActive > 0) {
          this.stepActive -= 1
        }
      },
      onNext() {
        this.$refs.form1.validate().then(res => {
          this.stepActive += 1
        })
      },
      onCancel() {
        this.$router.back()
      },
      submit() {
        console.log(this.$refs.form1.form)
        this.$refs.form1.validate().then(res => {
          this.$refs.form2.validate().then(res => {
            // console.log(res)
            const form1 = JSON.parse(JSON.stringify(this.$refs.form1.form))
            const form2 = JSON.parse(JSON.stringify(this.$refs.form2.form))
            const data = form1
            data.estimateCare = form2
            data.estimateMainQuestion.sjskPersonId = data.sjskPersonId
            data.estimateCare.sjskPersonId = data.sjskPersonId
            const estimateKeywordList = []
            data.estimateKeywordList.map(item => {

              if (item.value.length > 0) {
                console.log(item)
                item.options.map(option => {
                  if (item.value.includes(option.value)) {
                    const obj = {
                      keyword: option.label,
                      remark: '',
                      sjskPersonId: data.sjskPersonId,
                      value: option.value,
                      type: item.type
                    }
                    console.log(option.label)
                    if (option.label.includes('其他') || option.label.includes('原因')) {
                      obj.remark = item.remark
                    }
                    estimateKeywordList.push(obj)
                  }
                })
              }
              // item.value = item.value.toString()
              // item.sjskPersonId = data.sjskPersonId
            })
            console.log(estimateKeywordList)
            data.estimateKeywordList = estimateKeywordList

            estimateInput(data).then(res => {
              const {
                success
              } = res
              if (success) {
                this.$router.back()
              }
            })
          }).catch(err => {
            this.$message.warning('表单存在必填项未填写，请完整填写表单后再进行提交。')
          })
        }).catch(err => {
          this.$message.warning('表单存在必填项未填写，请完整填写表单后再进行提交。')
        })

      }
    }
  }
</script>

<style lang="less" scoped>
  .estimate-form {
    background-color: #fff;
    padding: 0 30px;
    padding-bottom: 60px;

    .step {
      padding: 20px;
      display: flex;
      justify-content: center;

    }

    .button-wrap {
      text-align: center;
      margin-top: 40px;
    }
  }
</style>
